<template>
  <app-page>
    <n-card title="产品列表">
      <h1>{{ title }}</h1>
      <add-product-button />
    </n-card>
    <n-button @click="openModal()">打开</n-button>
    <n-modal v-model:show="showModal" transform-origin="center">
      <n-form :mode="form">
        <n-form-item label="备注" path="remark">
          <n-input v-model:value.trim="form.remark" />
        </n-form-item>
      </n-form>
    </n-modal>
  </app-page>
</template>

<script lang="ts">
import { reactive, ref } from 'vue'
import AddProductButton from './components/add-product-button.vue'

export default {
  name: 'productList',
  components: {
    AddProductButton
  },
  setup() {
    const showModal = ref(false)
    const form = reactive({ remark: '' })

    return {
      form,
      showModal,
      title: '六六六六六六',
      openModal() {
        showModal.value = true
      }
    }
  }
}
</script>
